<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('工作日历管理')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: dcalendar-css" />
    <style>
        .date_selected {background-color: #E71B24;color: #fff;border:0px solid #fff}
        .no_first {padding-left: 5px;}
    </style>
</head>
<body>
<section>
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <select id="year-select" class="form-control"></select>
            </div>
        </div>
        <div class="col-md-9" style="padding-left:0px;">
            <button id='submitResult' type="button" class="btn btn-primary" style="margin-right:5px">
                <span class="glyphicon glyphicon-ok"></span> 提交
            </button>
            <button id='empty' type="button" class="btn btn-warning">
                <span class="glyphicon glyphicon-remove-sign"></span> 清空
            </button>
            <button id='init' type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-retweet"></span> 初始化节假日
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <table id='mycalendar1' class='calendar' month='1'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar2' class='calendar' month='2'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar3' class='calendar' month='3'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar4' class='calendar' month='4'></table>
        </div>
    </div>
    <div class="row" style='margin-top: 20px;'>
        <div class="col-md-3">
            <table id='mycalendar5' class='calendar' month='5'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar6' class='calendar' month='6'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar7' class='calendar' month='7'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar8' class='calendar' month='8'></table>
        </div>
    </div>
    <div class="row" style='margin-top: 20px;'>
        <div class="col-md-3">
            <table id='mycalendar9' class='calendar' month='9'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar10' class='calendar' month='10'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar11' class='calendar' month='11'></table>
        </div>
        <div class="col-md-3 no_first">
            <table id='mycalendar12' class='calendar' month='12'></table>
        </div>
    </div>
</section>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: dcalendar-js" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('para:paeaParaCalendar:edit')}]];
    var prefix = ctx + "para/paeaParaCalendar";
    $(function(){
        var curYear= [[${#dates.format(new java.util.Date().getTime(), 'yyyy')}]];
        var yearHtml = "";
        year = curYear - 3;
        for(var i=0; i < 3; i++){
            var selected = "";
            ++year;
            if (parseInt(year)==curYear) {
                selected = "selected='selected'";
            }
            yearHtml += "<option value='"+year+"' "+selected+">"+year+" 年</option>";
        }
        year = curYear;
        for(var i=0; i < 5; i++){
            yearHtml += "<option value='"+(++year)+"'>"+year+" 年</option>";
        }
        $("#year-select").append(yearHtml);

        changeYear();
        //改变年份
        $("#year-select").change(function(){
            changeYear();
        });

        //点击重置按钮，重置所有选中的日期
        $("#init").click(function(){
            //增加提示
            $.modal.confirm("确定要初始化本年工作日历?", function() {
                var year = $("#year-select").val();
                $.operate.get(prefix + "/init/"+year,refresh);
            })
        })

        //点击清空按钮，清空当年所有工作日历
        $("#empty").click(function(){
            //增加提示
            $.modal.confirm("确定要清空本年工作日历?", function() {
                var year = $("#year-select").val();
                var data = { "dates": "" }
                $.operate.post(prefix + "/edit/"+year, data,refresh);
            })
        })

        //提交
        $("#submitResult").click(function(){
            var dates = new Array();
            var year = $("#year-select").val();
            $.each($("td[selected='selected']"), function(index, dataObj){
                dates.push($(this).attr("date"));
            });
            $.modal.confirm("确定提交当前配置的工作日历?", function() {
                var data = { "dates": dates.join(",") }
                $.operate.post(prefix + "/edit/"+year, data,refresh);
            });
        })
    });

    function changeYear(){
        var year = $("#year-select").val();
        $('.calendar').each(function(){
            $(this).dcalendar(year+'-'+$(this).attr('month'));
        });
        //数据回显
        $.operate.get(prefix + "/list/"+year,refresh);
        $('.date').click(function(){
            if ($(this).attr("selected")) {
                $(this).attr("selected",false);
                $(this).removeClass("date_selected");
            } else {
                $(this).addClass("date_selected");
                $(this).attr("selected",true);
            }
        });
    }

    function refresh(res) {
        var year = $("#year-select").val();
        $('.date').each(function () {
            $(this).attr("selected",false);
            $(this).removeClass("date_selected");
        })
        if (res.data && res.data.length > 0) {
            $.each(res.data, function(i, workCal){
                $('#'+workCal.value).addClass("date_selected").attr("selected",true);
            });
        }
    }
</script>
</body>
</html>